<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<table>
	<tr>
		<td>
			<form id="search-form">
			<select name="filter.sellerCids">
				<option value=''>所有分类</option>
				<s:iterator value="categories">
					<option value='<s:property value="cid"/>' parent='<s:property value="parentCid"/>'>
						<s:if test="%{parentCid != 0}">└</s:if>
						<s:property value="name" />
					</option>
				</s:iterator>
			</select>
			<input id="keyword" type="text" name="filter.keyWord" value="关键字" style="margin:0.5em 0;"></input>
			<button id='search' style="margin:0.5em 0;">查找</button>
			</form>
		</td>
	</tr>
	<tr>
		<td style='vertical-align:top;'>
			<div style='width:400px;backgournd:#C3D9FF;font-weight:bold;'>待选宝贝</div>
			<div id="items" style='width:400px;height:400px;overflow:auto;'>
				<s:action name="items" executeResult='true'></s:action>
			</div>
			<div id="pager" class="pager span-8 separator"></div>
		</td>
		<td>
			<div><button id='select-btn'>&gt;</button></div>
			<div><button id='unselect-btn'>&lt;</button></div>
		</td>
		<td style='vertical-align:top;'>
			<div style='width:400px;backgournd:#C3D9FF;font-weight:bold;'>已选宝贝</div>
			<div style='width:400px;height:400px;overflow:auto;'>
				<table id='selected-items'>
					<tbody>
					</tbody>
				</table>
			</div>
		</td>
	</tr>
</table>

<script type="text/javascript">
$("button").button();
var $keyword = $("#keyword");
$keyword.css('color', '#666');
$keyword.focus(function() {
	if ($(this).val() == '关键字') {
		$(this).css('color', 'black');
		$(this).val('');
	}
});
$keyword.blur(function() {
	if ($(this).val() == '') {
		$(this).val('关键字');
		$(this).css('color', '#666');
	}
});

$("#search").click(function(){
	var q = getFilterParameters();
	$("#items").data('q', q);
	loadPage(1);
	return false;
});

$("#search-form").submit(function()
{
	return false;
});

$("#selected-items").mytable();

function getFilterParameters()
{
	var $form = $("#search-form");
	var cids = null;
	var c = $("select[name='filter.sellerCids']", $form);
	var cid = c.val();
	if (cid)
	{
		cids = [cid];
		$("option[parent='" + cid + "']", $form).each(function(){
			cids.push($(this).val());
		});
	}
	var keyword = $("input[name='filter.keyWord']", $form).val();
	if (keyword == '关键字')
	{
		keyword = null;
	}
	var q = '';
	if (cids)
	{
		q += '&filter.sellerCids=' + cids;
	}
	q += '&filter.status=' + status;
	if (keyword)
	{
		q += '&filter.keyWord=' + keyword;
	}
	return q;
}

$("#pager").pager({ 
	pagenumber: 1, 
	pagecount: $('#items-table').attr('pages'), 
	buttonClickCallback: loadPage, 
	firstLabel: "首页", prevLabel: "前一页", nextLabel: "下一页", lastLabel: "末页" 
});

function loadPage(number) {
	loadPage(number, null);
}

function loadPage(number, callback) {
    var limit = $('#items-table').attr('page-size');
    var offset = (number - 1) * limit;
    var q = $("#items").data('q') + "&option.limit=" + limit + "&option.offset=" + offset;
    var url = "items.action";
    $("#items").html("<img src='images/loading.gif'/>");
	$.ajax({
		url: url,
		data: q,
		type: 'POST',
		success: function(data) {
			$("#items").html(data);
			//checkSelection();
			var pageCount = parseInt($("#items-table").attr("pages"));
			$("#pager").pager({ pagenumber: number, pagecount: pageCount, buttonClickCallback: loadPage, firstLabel: "首页", prevLabel: "前一页", nextLabel: "下一页", lastLabel: "末页" });
			if (callback)
			{
				callback();
			}
		}
	});
}

function reload()
{
	reload(null);
}

function reload(callback)
{
	var i = parseInt($("#items-table").attr("pageIndex"));
	loadPage(i+1, callback);
}

	$('#select-btn').click(function() {
		var $selectedItems = $("#items tr.row-selected:visible");
		var $copy = $selectedItems.clone();
		$selectedItems.hide();
		$copy.appendTo($('#selected-items tbody'));
	});
	$('#unselect-btn').click(function(){
		var $selectedItems = $('#selected-items tr.row-selected');
		$selectedItems.each(function(){
			var numIid = $(this).attr('num_iid');
			$('#items tr[num_iid=' + numIid + ']').show();
		});
		$selectedItems.remove();
	});
</script>